import React, { useState } from 'react'
import { Button, Modal, Form, Input, Avatar } from 'antd';
import {
    UserOutlined,
} from '@ant-design/icons';
import { useAuth, baseAvatarUrl } from '../../context/AuthProvider';
import { uploadAvatar, changeUser } from '../../api/user';

const ChangeInfoModal = () => {
    const { user, setUser } = useAuth();
    const [avatar, setAvatar] = useState(user.avatar);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish = (values) => {
        changeUser({ ...values, avatar, userId: user.userId })
            .then(res => {
                setUser(res.data)
                setIsModalOpen(false);
            })
    }
    const change = (e)=>{
        const avatarData = new FormData();
        avatarData.append('file',e.target.files[0])
        uploadAvatar(avatarData)
            .then(res=>{
                setAvatar(res.data);
            })
    }
    return (
        <>
            <a onClick={showModal}>
                个人信息
            </a>
            <Modal
                title="个人信息"
                open={isModalOpen}
                onCancel={handleCancel}
                footer={null}
            >
                <Form
                    name="basic"
                    layout='vertical'
                    style={{
                        maxWidth: 400,
                        margin: '0px auto'
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                    initialValues={user}
                >
                    <input 
                        style={{display: 'none'}}
                        id='avatar' 
                        type="file" 
                        onChange={change}
                    />
                    <label htmlFor="avatar">
                        <Avatar src={baseAvatarUrl+avatar} size={40} icon={<UserOutlined />} />
                    </label>
                    <Form.Item
                        label="用户名"
                        name="userName"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="昵称"
                        name="nickName"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            block
                            shape='round'
                            type="primary"
                            htmlType="submit"
                        >
                            确定修改
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default ChangeInfoModal